<script setup lang="ts">
import {ref} from "vue";
import router from "@/router";
const loginForm=ref({
  username: '',
  password: ''
})

// 模拟登录成功,先不校验账户名和密码
const login = () => {
  console.log(loginForm.value)
  console.log('登录成功')
  // 直接跳转到首页
  router.push('/')
}
</script>

<template>

  <div class="content">
    <div class="content-wrapper">
      <div class="content-left"></div>
      <div class="content-right">
        <div>
          <text>仓库系统登录</text>
        </div>
        <div class="login-wrapper">
          <div class="login-box">
            <img src="@/assets/login/login-username.png">
            <input  v-model="loginForm.username" type="text"  placeholder="请输入账号"/>
          </div>

        </div>
        <div class="login-wrapper">
          <div class="login-box">
            <img src="@/assets/login/login-pwd.png">
            <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
          </div>

        </div>
        <button  @click="login" class="login-wrapper login-wrapper-butten"><span>登录</span></button>
      </div>
    </div>

  </div>


</template>

<style scoped lang="less">
.content {
  // 背景图
  background-image: url("@/assets/login/login-bg.png");
  // 背景图同比放大
  background-size: cover;
  // 绝对定位
  position: absolute;
  width: 1920px;
  height: 1080px;
  // 圆角
  border-radius: 0px 20px 20px 0px;
  //包装一层，让后后面的内容都成为一个整体，好调整样式
  .content-wrapper {
    position: absolute;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    top: 240px;
    left: 460px;
    width: 1000px;
    height: 600px;
    border-radius: 0px 20px 20px 0px;

    .content-left {
      background-image: url("@/assets/login/login-left.png");
      // 背景图同比放大
      background-size: cover;
      width: 541px;
    }

    .content-right {
      border-radius: 0px 20px 20px 0px;
      background-color: #FFFFFF;
      width: 460px;
      display: flex;
      flex-direction: column;


      // 标题样式
      text {
        font-family: 思源黑体;
        font-size: 24px;
        font-weight: bold;
        line-height: normal;
        letter-spacing: 0em;
      }

      // 登录框样式
      .login-wrapper {
        width: 320px;
        height: 50px;
        border-radius: 25px;
        background: #F2F4F9;
        border: none;
        display: flex;

        img {
          //解决img和input框对齐
          vertical-align: top;
          width: 16px;
          height: 16px;
        }

        input {
          // 解决背景颜色和div保持一致
          background-color: inherit;
          height: 16px;
          border: none;

        }

        .login-box {
          margin-left: 28px;
          padding-top: 16px;
        }

        .login-box > input {
          margin-left: 16px;
        }
      }

      // 登录按钮样式
      .login-wrapper-butten {
        background: #235EFF;
        justify-content: center;
        span {font-family: 思源黑体;
          font-size: 16px;
          font-weight: 500;
          line-height: 50px;
          letter-spacing: 0em;
          color: #FFFFFF;
         }

      }

    }

    //所有子元素都
    .content-right > * {
      margin-left: 70px;
      margin-bottom: 20px;
    }

    // 标题
    .content-right > :first-child {
      margin-left: 158px;
      margin-top: 108px;
      margin-bottom: 48px;
    }
  }


}


</style>